let vm = new Vue({
    el:'#app',  // 找到绑定的html内容
    delimiters: ['[[', ']]'],  // 修改vue读取变量的语法,如此一来便于区分jinja2和vue的渲染
    data:{  // 数据对象
        // v-model
        username: '',
        password: '',
        password2: '',
        mobile: '',
        allow: '',
        image_code_url: '',
        image_code: '',
        sms_code: '',
        uuid: '',
        send_flag: false, // 类比上厕所，这是锁，false表示门开，true表示门关

        // v-show
        error_name: false,
        error_password: false,
        error_password2: false,
        error_mobile: false,
        error_allow: false,
        error_image_code: false,
        error_sms_code: false,

        // error_message 等 渲染数据
        error_name_msg: '',
        error_mobile_msg: '',
        error_image_code_msg: '',
        sms_code_tip:'获取短信验证码',
        error_sms_code_msg: '',
    },
    mounted(){  // 页面加载完成会调用
        // 生成图片验证码
        this.generate_image_code();
    },
    methods:{  // 定义和实现 事件方法
        // 发送短信验证码
        send_sms_code(){
            // 避免恶意用户频繁点击发送验证码的标签
            if (this.send_flag == true){
                return;  // 有人上厕所 退回去
            }
            this.send_flag == true;

            // 校验数据 mobile image_code
            this.check_mobile();
            this.check_image_code();
            if (this.error_mobile == true || this.error_image_code == true) {
                this.send_flag = false;
                return;
            }

            let url = '/sms_codes/' + this.mobile + '/?image_code=' + this.image_code + '&uuid=' + this.uuid
            // axios.get(url, '请求头')
            axios.get(url, {
                responseType: 'json'
            })
                .then(response => {
                    // alert(response);
                    if (response.data.code == '0'){  // 图形验证码正确
                        // 展示60秒倒计时
                        let num = 60;

                        // t = setInterval('回调函数', '时间间隔')
                        let t = setInterval(() => {
                            if (num == 1){
                                clearInterval(t);
                                this.sms_code_tip = '获取短信验证码';
                                this.generate_image_code()  // 重新生成短信验证码
                                this.send_flag = false;
                            } else {
                                num -= 1;
                                this.sms_code_tip = num + '秒';
                            }
                        }, 1000)
                    }else{  // 图形验证码有误
                        if(response.data.code == '4001'){  // 图形验证码错误
                            this.error_image_code = true;
                            this.error_image_code_msg = response.data.errmsg;
                            // this.send_flag = false;
                        } else {  // 短信验证码错误
                            this.error_sms_code = true;
                            this.error_sms_code_msg = response.data.errmsg;
                            // this.send_flag = false;
                        }
                        this.send_flag = false;
                    }
                })
                .catch(error => {
                    console.log(error.response);
                    this.send_flag = false;
                })
        },

        // 封装生成图片验证码的方法 方便代码复用
        generate_image_code(){
            this.uuid = generateUUID();
            this.image_code_url = '/image_codes/' + this.uuid + '/';
        },

        // 校验用户名
        check_username(){
            // 定义正则
            let re = /^[a-zA-Z0-9_-]{5,20}$/;
            // 使用正则 匹配用户数据
            if (re.test(this.username)){
                // 匹配成功
                this.error_name = false;
            } else {
                //匹配失败
                this.error_name_msg = "请输入5-20个字符的用户名";
                this.error_name = true;
            }

            // if(this.error_name = false){
            //     axios.get('url','请求头')
            //         .then(response => {
            //         })
            //         .catch(error => {
            //         })
            // }   框架 # TODO 十分不熟悉了
            if (this.error_name == false){
                let url = '/usernames/'+ this.username +'/count/';
                axios.get(url,{
                    responseType: 'json'
                })
                    .then(response => {
                        if(response.data.count == 1 ){
                            this.error_name_msg = '用户名已存在';
                            this.error_name = true;
                        } else{
                            this.error_name = false;
                        }
                    })
                    .catch(error => {
                        console.log(error.response)
                    })
            }
        },
        // 校验密码
        check_password(){
            let re = /^[0-9a-zA-Z]{8,20}$/;
            if (re.test(this.password)){
                // 成功
                this.error_password = false;
                // this.error_password = flse;  这里有问题 点击注册按钮，会在校验密码的时候报错 然后下面的代码不执行，直接就开始submit了
            } else {
                // alert('check_password');
                this.error_password = true;
            }
        },
        check_password2(){
            if (this.password2 != this.password){
                this.error_password2 = true;
            } else{
                this.error_password2 = false;
            }
        },
        check_mobile(){
            let re = /^1[3-9]\d{9}$/;
            if (re.test(this.mobile)){
                this.error_mobile = false;
            } else{
                this.error_mobile = true;
                this.error_mobile_msg = '请输入正确的手机号码';
            }
            if (this.error_mobile == false){
                let url = '/mobile/'+ this.mobile +'/count/';
                axios.get(url,{
                    responseType: 'json'
                })
                    .then(response => {
                        if (response.data.count == 1){
                            this.error_mobile = true;
                            this.error_mobile_msg = '手机号码已注册';
                        } else{
                            this.error_mobile = false;
                        }
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }
        },
        // 图形验证码
        check_image_code(){
            if (this.image_code.length != 4){
                this.error_image_code_msg = '请输入正确的图形验证码';
                this.error_image_code = true;
            } else{
                this.error_image_code = false;
            }
        },

        // 短信验证码
        check_sms_code(){
            if (this.sms_code.length != 6){
                this.error_sms_code_msg = '请输入正确的短信验证码';
                this.error_sms_code = true;
            } else{
                this.error_sms_code = false;
            }
        },

        check_allow(){
            // 这个不会
            if (!this.allow){
                this.error_allow = true;
            } else{
                this.error_allow = false;
            }

        },
        // 监听表单提交事件  要记得哈
        on_submit(){
            // 都校验一遍

            this.check_username();
            this.check_password();
            this.check_password2();
            this.check_mobile();
            this.check_sms_code()
            this.check_allow();

            if (this.error_name == true || this.error_password == true || this.error_password2 == true || this.error_mobile == true || this.error_allow == true || this.error_sms_code == true){
                alert('on_submit');
                window.event.returnValue = false;
            }


        },



    }

});